<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title></title>
  <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
  <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
  <link rel="stylesheet" href="/static/mobile/weuix.css">
  <link rel="stylesheet" href="/static/mobile/css.css">
  <link rel="stylesheet" href="/static/mobile/iconfont.css">
  <style>
    #content{
      height: 100vh;
    }
    .weui-tab__bd {
      padding: 10px;
    }

    .weui-tabbar__item.weui-bar__item--on .weui-tabbar__label,
    .weui-tabbar__item .weui-tabbar__label,
    .weui-tabbar__item i {
      /*color: #0000ff;*/
    }

    a {
      color: #000000;;
    }

    .icon-search {
      float: right;
      padding-right: 15px;
    }

    .search-icon {
      position: absolute;
      left: 7px;
      top: 0;
      line-height: 28px;
    }

    .search {
      border: none;
      outline: none;
      margin-left: 30px;
      background: transparent;
    }

    .search-form {
      position: relative;
      border-radius: 10px;
      border: 1px solid #CCCCCC;
      height: 25px;
      padding: 2px;
    }

  </style>
</head>
<body>
<section id="content">
  <div class="header">
    <div class="weui-flex" v-show="!showSearch">
      <div class="weui-flex__item"></div>
      <div class="weui-flex__item"><span class="page-header">安全常识</span></div>
      <div class="weui-flex__item">
        <i class="iconfont icon-chazhao icon-search" @click="onShowSearch"></i></div>
    </div>
    <div class="weui-flex" v-show="showSearch">
      <div class="placeholder" style="width: 25%" @click="searchBack">
        <i class="icon icon---" style="float: left;margin-left: 10px;"></i>
      </div>
      <div class="search-form">
        <i class="weui-icon-search search-icon"></i>
        <input type="search" class="search" placeholder="搜索" v-model="searchText">
      </div>
      <div class="placeholder" style="width:25%;text-align: center">
        <span @click="onSearch">搜索</span></div>
    </div>

    <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
  </div>
  <div class="weui-news" style="padding-bottom: 64px">
    <ul class="weui-news-list">
      <a :href="'view.html?id=' + item.id" v-for="item in articles">
      <li class="weui-news-item">
        <div class="weui-news-inner">
          <div class="weui-news-inners">
            <div class="weui-news-text">
              <div class="weui-news-title">
                {{item.title}}</div>
            </div>
            <div class="weui-news-info">
              <div class="weui-news-infoitem">
                <i class="iconfont icon-wode"></i>
                <span class="weui-news-left">{{item.realname}}</span>
              </div>
              <div class="weui-news-infoitem">{{item.create_time}}</div>
            </div>
          </div>
          <div class="weui-news-media">
            <img :src="item.mobile_thumb ? item.mobile_thumb : '/static/mobile/images/my-banner.jpg'">
          </div>
        </div>
      </li>
  </a>
    </ul>
    <div class="weui-loadmore" v-show="isEnd">
      <span class="weui-loadmore__tips">暂无数据</span>
    </div>
  </div>
  <div id="footer">dd</div>
</section>
<script src="/static/js/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.2.1/vue.min.js"></script>
<script src="/static/mobile/main.js"></script>

<script>


  var content = new Vue({
    el: "#content",
    data: {
      articles: [],
      page: 1,
      isEnd: false,//是否到底
      showSearch: false,
      searchText: ''
    },
    created: function () {
      var that = this;
      var page = this.page;
      this.getData(page);

      window.addEventListener('scroll', function () {
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        var scrollHeight = $(document).height();
        var windowHeight = $(this).height();
        if (scrollTop + windowHeight === scrollHeight && !that.isEnd) {
          page++;
          that.getData(page);
        }
      }, true);
    },
    mounted: function () {
      var that = this;
      $("#footer").load('footer.html');
    },
    watch: {},
    methods: {
      searchBack:function(){
        this.showSearch = !this.showSearch;
        this.getData();
      },
      onShowSearch: function () {
        this.showSearch = !this.showSearch
      },
      onSearch: function () {
        var searchText=this.searchText.trim();
        var that=this;
        if(searchText.length==0){
          js_alert('请输入要查找的内容');
          return;
        }
        js_request('/portal/knowledge/index', {"search": searchText}, function (result) {
          if (result.code == 0) {
            $.toast(result.msg, "forbidden");
            return false;
          }
          if (result.data.length > 0) {
            that.articles = result.data;
          } else {
            js_alert('您查找的内容不存在');
          }
        });
      },
      getData: function (page) {
        var that = this;
        js_request('/portal/knowledge/index', {"page": page}, function (result) {
          if (result.code == 0) {
            $.toast(result.msg, "forbidden");
            return false;
          }
          if (result.data.length > 0) {
            that.articles = that.articles.concat(result.data);
          } else {
            that.isEnd = true;
          }
        });
      }
    },
  });
</script>
</body>
</html>